<template>
	<view class="content">
		<view class="content-top">
			<view class='cell-group'>
				<view class='cell-item cell-item-mid'>
					<view class='cell-item-hd'>
						<view class='cell-hd-title'>银行卡号</view>
					</view>
					<view class='cell-item-bd'>
						<input type="number" class='cell-bd-input' v-model="cardNumber" focus @blur="checkCard()"
							placeholder='请输入银行卡号'></input>
					</view>
				</view>
				<view class='cell-item cell-item-mid'>
					<view class='cell-item-hd'>
						<view class='cell-hd-title'>持卡人</view>
					</view>
					<view class='cell-item-bd'>
						<input type="text" class='cell-bd-input' v-model="userData.truename" disabled placeholder='持卡人姓名'></input>
					</view>
				</view>
				<view class='cell-item cell-item-mid'>
					<view class='cell-item-hd'>
						<view class='cell-hd-title'>银行名称</view>
					</view>
					<view class='cell-item-bd'>
						<input type="text" class='cell-bd-input' :disabled="true" v-model="bankName"></input>
					</view>
				</view>
				<view class='cell-item cell-item-mid'>
					<view class='cell-item-hd'>
						<view class='cell-hd-title'>银行卡类型</view>
					</view>
					<view class='cell-item-bd'>
						<input type="text" class='cell-bd-input' :disabled="true" v-model='cardTypeName'></input>
					</view>
				</view>
				<view class='cell-item cell-item-mid'>
					<view class='cell-item-hd'>
						<view class='cell-hd-title'>开户行名</view>
					</view>
					<view class='cell-item-bd'>
						<input type="text" class='cell-bd-input' v-model="accountBank" placeholder='请输入开户银行名'></input>
					</view>
				</view>

				<view class='cell-item cell-item-mid right-img' >
					<view class='cell-item-hd'>
						<view class='cell-hd-title'>开户行地址</view>
					</view>
					<view class='cell-item-bd'>
						<text @tap="selectAddress" style="text-align: right;width: 100%;">{{pickerValue}}</text>
						<itmister-address-picker ref="addressEl" @confirmChange="confirmChange"></itmister-address-picker>
					</view>
					<view class='cell-item-ft'>
						<image class='cell-ft-next icon' src='/static/image/ic-pull-down.png' @click="selectAddress">
						</image>
					</view>
				</view>

				<view class='cell-item cell-item-mid'>
					<view class='cell-item-hd'>
						<view class='cell-hd-title'>身份证号</view>
					</view>
					<view class='cell-item-bd'>
						<input type="text" class='cell-bd-input' v-model="bank_ucard" placeholder='请输入身份证号'></input>
					</view>
				</view>
				<view class='cell-item cell-item-mid'>
					<view class='cell-item-hd'>
						<view class='cell-hd-title'>银行预留手机号</view>
					</view>
					<view class='cell-item-bd'>
						<input type="text" class='cell-bd-input' v-model="bank_mobile" placeholder='请输入银行预留手机号'></input>
					</view>
				</view>
				<view class='cell-item'>
					<view class='cell-item-hd'>
						<view class='cell-hd-title'>设为默认</view>
					</view>
					<view @click="defaultChange">
						<view class='cell-item-ft'>
							<label class="radio">
								<radio value="1" :checked="checked" color="#333" />
							</label>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="button-bottom">
			<button class="btn btn-square btn-b" @click="addCard" hover-class="btn-hover2" :disabled='submitStatus'
				:loading='submitStatus'>保存</button>
		</view>
	</view>

</template>

<script>
import itmisterAddressPicker from '@/components/itmister-address-picker/itmister-address-picker.nvue'
	export default {
		components: {
			itmisterAddressPicker
		},
		data() {
			return {
				bankName: '', // 银行名称
				cardType: 1, // 卡类型
				cardTypeName: '', // 卡片类型
				bankCode: '', // 银行缩写码
				accountBank: '', // 开户行
				cardNumber: '', // 银行卡号
				name: '', // 开户人姓名
				bank_mobile:'',
				bank_ucard:'',
				mobile: '', // 
				region: ['北京市', '北京市', '东城区'],
				areaId: 110101,
				address: '',
				is_def: 2,
				checked: false,
				pickerValue: '',
				defaultIndex: [0, 0, 0],
				submitStatus: false,
				userData: {}
			}
		},
		computed: {},
		methods: {
			// 省市区联动初始化
			selectAddress(){
			    this.$refs.addressEl.show();
			},
			// 确认选中
			confirmChange(address){
			    this.pickerValue = address.province + '/' + address.city + '/' + address.area;
				let data = {
					province_name: address.province,
					city_name: address.city,
					county_name: address.area
				}
				this.areaId = address.areaId
				/* this.$api.getAreaId(data, res => {
					if (res.status) {
						this.areaId = res.data
					} else {
						uni.showModal({
							title: '提示',
							content: '地区选择出现问题，请重新选择地区',
							showCancel: false
						});
					}
				}); */
			},
			// 选择/取消默认
			defaultChange() {
				this.checked = !this.checked
				this.is_def = this.is_def === 1 ? 2 : 1
			},
			//存储收货地址
			saveShip() {
				if (this.id && this.id != 0) {
					//编辑存储
					let data = {
						'id': this.id,
						'name': this.name,
						'address': this.address,
						'mobile': this.mobile,
						'bank_ucard': this.bank_ucard,
						'bank_mobile': this.bank_mobile,
						'is_def': this.is_def
					}

					data['area_id'] = this.areaId,
						this.$api.editShip(data, res => {
							if (res.status) {
								this.$common.successToShow('编辑成功', function() {
									uni.navigateBack({
										delta: 1
									});
								});
							} else {
								this.$common.errorToShow(res.msg);
							}
						});
				} else {
					//添加
					let data = {
						'area_id': this.areaId,
						'name': this.name,
						'address': this.address,
						'mobile': this.mobile,
						'bank_ucard': this.bank_ucard,
						'bank_mobile': this.bank_mobile,
						'is_def': this.is_def
					}
					this.$api.saveUserShip(data, res => {
						if (res.status) {
							this.$common.successToShow('添加成功', function() {
								uni.navigateBack({
									delta: 1
								});
							});
						} else {
							this.$common.errorToShow(res.msg);
						}
					});
				}
			},
			// 判断获取银行卡类型
			checkCard() {
				if (this.cardNumber) {
					let data = {
						card_code: this.cardNumber
					}
					this.$api.getBankCardOrganization(data, res => {
						if (res.status) {
							let data = res.data
							this.bankName = data.name
							this.cardType = data.type
							this.bankCode = data.bank_code
							this.cardTypeName = data.type_name
						} else {
							this.$common.errorToShow(res.msg, () => {
								this.bankCode = this.bankName = this.cardType = this.cardTypeName = ''
							})
						}
					})
				} else {
					this.bankCode = this.bankName = this.cardType = this.cardTypeName = ''
				}
			},
			Info() {
				this.$api.userInfo({}, res => {
					this.userData = res.data
				})
			},
			// 添加银行卡
			addCard() {
				if (!this.cardNumber) {
					this.$common.errorToShow('请输入银行卡号')
				} else if (!this.bankName || !this.cardType || !this.bankCode) {
					this.$common.errorToShow('请输入正确的银行卡号')
				} else if (!/^[\u4E00-\u9FA5\uf900-\ufa2d·s]{2,30}$/.test(this.userData.truename)) {
					this.$common.errorToShow('请输入正确的持卡人名称')
				} else if (!this.areaId) {
					this.$common.errorToShow('请选择开户行所在地区')
				} else if (!this.accountBank) {
					this.$common.errorToShow('请输入开户银行信息')
				} else {
					this.submitStatus = true;
					let data = {
						bankName: this.bankName,
						areaId: this.areaId,
						accountBank: this.accountBank,
						accountName: this.userData.truename,
						bankCode: this.bankCode,
						cardNumber: this.cardNumber,
						cardType: this.cardType,
						
						'bank_ucard': this.bank_ucard,
						'bank_mobile': this.bank_mobile,
						isDefault: this.is_def
					}

					this.$api.addBankCard(data, res => {
						if (res.status) {
							this.$common.successToShow(res.msg, ress => {
								// this.submitStatus = false;
								uni.navigateBack({
									delta: 1
								});
							})
						} else {
							this.$common.errorToShow(res.msg);
						}
					}, res => {
						this.submitStatus = false;
					})
				}
			},
			// #ifdef MP-ALIPAY
			// alipay bank
			aliPayBank() {
				if (this.cardNumber.length >= 16 && this.cardNumber.length <= 19) {
					let data = {
						card_code: this.cardNumber
					}
					this.$api.getBankCardOrganization(data, res => {
						if (res.status) {
							let data = res.data
							this.bankName = data.name
							this.cardType = data.type
							this.bankCode = data.bank_code
							this.cardTypeName = data.type_name
						} else {
							this.$common.errorToShow(res.msg, () => {
								this.bankCode = this.bankName = this.cardType = this.cardTypeName = ''
							});
						}
					})
				} else {
					this.bankCode = this.bankName = this.cardType = this.cardTypeName = ''
				}
			}
			// #endif
		},
		onLoad(e) {
			this.Info()
			if (e.ship_id) {
				//编辑
				this.id = e.ship_id;
				this.getShipInfo();
			} else {
				//添加
				this.pickerValue = "请选择省市区"; //this.region[0]+ " "+ this.region[1]+" "+this.region[2];
			}
			//没有地区信息时，再拉一次
			if (!this.$db.get('areaList')) {
				//获取地区信息
				this.$api.getAreaList({}, res => {
					if (res.status) {
						this.$db.set('areaList', res.data)
					}
				});
			}
		},
		onBackPress() {
			
		},
		// #ifdef MP-ALIPAY
		watch: {
			cardNumber() {
				this.$common.throttle(this.aliPayBank, this, 450);
			}
		},
		// #endif
	}
</script>

<style>
	.cell-item {
		background: transparent;
	}

	.cell-group {
		background-color: #202126;
		margin: 0 30rpx;
		padding: 0 30rpx;
		border-radius: 20rpx;
	}

	.cell-bd-input {
		color: #fff;
	}

	.user-head {
		height: 100upx;
	}

	.user-head-img {
		height: 90upx;
		width: 90upx;
		border-radius: 50%;
	}

	.cell-hd-title {
		color: #b9b9b9;
	}

	.cell-item-hd {
		width: 180rpx;
	}

	.cell-item-bd {
		color: #666;
		font-size: 26upx;
	}

	.button-bottom .btn {
		width: 50%;
	}

	.right-img .cell-item-ft {
		right: 26rpx;
	}

	/* #ifdef MP-ALIPAY */
	input {
		font-size: 24upx;
	}

	/* #endif */
</style>